<!-- Features Section -->
<section id="features" class="section features-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Powerful Features</h2>
            <p class="section-subtitle">
                Everything you need to build modern applications, integrated into one unified platform
            </p>
        </div>
        
        <div class="features-grid">
            <!-- Text Processing -->
            <div class="feature-category">
                <h3 class="category-title">📝 Text Processing</h3>
                <div class="feature-cards">
                    <div class="feature-card">
                        <div class="feature-icon">📝</div>
                        <h4>Markdown Processing</h4>
                        <p>Convert Markdown to HTML with Marked.js. Support for extensions, custom renderers, and GitHub-flavored markdown.</p>
                        <div class="feature-tech">marked.js</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">🔍</div>
                        <h4>HTML Parsing</h4>
                        <p>Parse and manipulate HTML with BeautifulSoup. Extract data, clean content, and navigate DOM trees effortlessly.</p>
                        <div class="feature-tech">beautifulsoup4</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">🛡️</div>
                        <h4>HTML Sanitization</h4>
                        <p>Protect against XSS attacks with sanitize-html. Configure allowed tags, attributes, and content policies.</p>
                        <div class="feature-tech">sanitize-html</div>
                    </div>
                </div>
            </div>
            
            <!-- Code Tools -->
            <div class="feature-category">
                <h3 class="category-title">⚙️ Development Tools</h3>
                <div class="feature-cards">
                    <div class="feature-card">
                        <div class="feature-icon">✨</div>
                        <h4>Code Formatting</h4>
                        <p>Format code beautifully with Prettier. Support for JavaScript, TypeScript, CSS, HTML, JSON, and more.</p>
                        <div class="feature-tech">prettier</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">🔧</div>
                        <h4>Code Linting</h4>
                        <p>Analyze JavaScript and TypeScript with ESLint. Catch errors, enforce standards, and improve code quality.</p>
                        <div class="feature-tech">eslint</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">🎨</div>
                        <h4>Syntax Highlighting</h4>
                        <p>Add rich syntax highlighting with Pygments. Support for 500+ languages and various output formats.</p>
                        <div class="feature-tech">pygments</div>
                    </div>
                </div>
            </div>
            
            <!-- Data Processing -->
            <div class="feature-category">
                <h3 class="category-title">📊 Data Processing</h3>
                <div class="feature-cards">
                    <div class="feature-card">
                        <div class="feature-icon">✅</div>
                        <h4>JSON Validation</h4>
                        <p>Validate JSON data against schemas with Ajv. Fast, secure, and standards-compliant validation.</p>
                        <div class="feature-tech">ajv</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">📋</div>
                        <h4>CSV Processing</h4>
                        <p>Parse CSV data to JSON with csv-parser. Handle various delimiters, encodings, and data types.</p>
                        <div class="feature-tech">csv-parser</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">📊</div>
                        <h4>Text Comparison</h4>
                        <p>Compare texts and highlight differences with Diff. Perfect for version control and change tracking.</p>
                        <div class="feature-tech">diff</div>
                    </div>
                </div>
            </div>
            
            <!-- Media Generation -->
            <div class="feature-category">
                <h3 class="category-title">🎨 Media Generation</h3>
                <div class="feature-cards">
                    <div class="feature-card">
                        <div class="feature-icon">📱</div>
                        <h4>QR Code Generation</h4>
                        <p>Generate QR codes with python-qrcode. Various formats, error correction levels, and customization options.</p>
                        <div class="feature-tech">qrcode</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">📈</div>
                        <h4>Diagram Creation</h4>
                        <p>Create diagrams from text with Mermaid CLI. Flowcharts, sequence diagrams, Gantt charts, and more.</p>
                        <div class="feature-tech">mermaid</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">📄</div>
                        <h4>PDF Generation</h4>
                        <p>Generate PDF documents with PDFKit. Support for text, images, vector graphics, and complex layouts.</p>
                        <div class="feature-tech">pdfkit</div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">🖼️</div>
                        <h4>Image Processing</h4>
                        <p>Manipulate images with Pillow. Resize, rotate, filter, format conversion, and advanced operations.</p>
                        <div class="feature-tech">pillow</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="features-cta">
            <div class="cta-card">
                <h3>Ready to explore all features?</h3>
                <p>Check out our comprehensive documentation with examples and tutorials for each library.</p>
                <a href="docs/api.html" class="btn btn-primary">Browse API Documentation</a>
            </div>
        </div>
    </div>
</section>
